<script  setup>
import Card from "../../help/Card.vue";
import { EchartsOptions } from "../../help/index.js";
import { nextTick,ref } from "vue";
import * as echarts from 'echarts'

const id = ref(Math.random().toString(36).substring(2, 9))

const option = {
  grid: {
    left: '20%',
    top: '20%',
    right: '0%',
    bottom: '20%',
  },
  formatter: '{d}%\n共{c}个{b}',
  tooltip: {
    trigger: 'item'
  },
  legend: {
    show: false,
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 59, name: '课前测试' },
        { value: 5, name: '线上学习' },
        { value: 40, name: '课堂行为表现' },
        { value: 40, name: '十度评价' },
        { value: 40, name: '企业实践' },
        { value: 40, name: '课后作业' },
        { value: 2, name: '课前实验' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}

// const option = {
//   grid: {
//     left: '20%',
//     top: '20%',
//     right: '0%',
//     bottom: '20%',
//   },
//   tooltip: {
//     // trigger: 'item'
//   },
//   legend: {
//     orient: 'vertical',
//     left: 'left'
//   },
//   series: [
//     {
//       name: 'Access From',
//       type: 'pie',
//       radius: ['40%', '70%'],
//       avoidLabelOverlap: false,
//       itemStyle: {
//         borderRadius: 10,
//         borderColor: '#fff',
//         borderWidth: 2
//       },
//       label: {
//         show: false,
//         position: 'center'
//       },
//       emphasis: {
//         label: {
//           show: true,
//           fontSize: '40',
//           fontWeight: 'bold'
//         }
//       },
//       labelLine: {
//         show: false
//       },
//       data: [
//         { value: 1048, name: '课前测试' },
//         { value: 735, name: '线上学习' },
//         { value: 580, name: '课堂行为表现' },
//         { value: 484, name: '十度评价' },
//         { value: 300, name: '企业实践' },
//         { value: 300, name: '课后作业' },
//         { value: 300, name: '课前实验' },
//       ]
//     }
//   ]
// }

nextTick(() => {
  EchartsOptions(option, id.value)
})
</script>

<template>
  <Card title="总评构成" class="basis-1/3 w-full h-full animate__animated animate__fadeInTopRight">
    <div class="w-full h-full" :id="id"></div>
  </Card>
</template>
